import React, { Component } from 'react'

export default class App extends Component {
  state = {
    username: '',
    // #1 先准备一个状态来控制 input 中的 value
    content: '',
  }
  handleInput = (e) => {
    this.setState({
      username: e.target.value,
    })
  }
  handleTextArea = (e) => {
    // #3 使用 onChange 来改变状态
    this.setState({
      content: e.target.value,
    })
  }
  render() {
    return (
      <ul>
        <li>
          用户名：
          <input type='text' value={this.state.username} onChange={this.handleInput} />
        </li>
        <li>
          {/* #2 用状态 username 和 input 的 value 进行绑定 */}
          <textarea value={this.state.content} cols='30' rows='10' onChange={this.handleTextArea}></textarea>
        </li>
      </ul>
    )
  }
}
